<template>
  <div class="homepage1 df">
    <div class="chart1" id="chart1"></div>
    <div class="chart2" id="chart2"></div>
    <div class="chart3" id="chart3"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts";
import variablepie from "highcharts/modules/variable-pie";
variablepie(Highcharts);

export default {
  data() {
    return {};
  },
  methods: {
    getChart1() {
      var chart = Highcharts.chart("chart1", {
        credits: {
          enabled: false, // 禁用版权信息
        },
        chart: {
          type: "column",
        },
        title: {
          text: "",
        },
        subtitle: {
          text: "利润表金额对比",
        },
        xAxis: {
          categories: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          crosshair: true,
        },
        yAxis: {
          min: 0,
          title: {
            text: "",
          },
        },
        tooltip: {
          // head + 每个 point + footer 拼接成完整的 table
          headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "本期金额",
            data: [
              49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
              194.1, 95.6, 54.4,
            ],
          },
          {
            name: "累计金额",
            data: [
              83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5,
              106.6, 92.3,
            ],
          },
        ],
      });
    },
    getChart2() {
      Highcharts.chart("chart2", {
        credits: {
          enabled: false, // 禁用版权信息
        },
        chart: {
          type: "variablepie",
        },
        title: {
          text: "资产负债表面积图",
          style: {
            color: "",
            fontSize: "12px",
          },
        },
        subtitle: {
          text: "",
        },
        tooltip: {
          headerFormat: "",
          pointFormat:
            '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
            "面积 (平方千米): <b>{point.y}</b><br/>" +
            "人口密度 (每平方千米人数): <b>{point.z}</b><br/>",
        },
        series: [
          {
            minPointSize: 10,
            innerSize: "20%",
            zMin: 0,
            name: "countries",
            data: [
              {
                name: "本期金额",
                y: 505370,
                z: 92.9,
              },
              {
                name: "累计金额",
                y: 551500,
                z: 118.7,
              },
              {
                name: "本期流动",
                y: 312685,
                z: 124.6,
              },
              {
                name: "累积流动",
                y: 78867,
                z: 137.5,
              },
            ],
          },
        ],
      });
    },
    getChart3() {
      var chart = Highcharts.chart(
        "chart3",
        {
          credits: {
            enabled: false, // 禁用版权信息
          },
          chart: {
            spacing: [40, 0, 40, 0],
          },
          title: {
            floating: true,
            text: "圆心显示的标题",
            style: {
            color: "",
            fontSize: "12px",
          },
          },
          tooltip: {
            pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: "pointer",
              dataLabels: {
                enabled: true,
                format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                style: {
                  color:
                    (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                    "black",
                },
              },
              point: {
                events: {
                  mouseOver: function (e) {
                    // 鼠标滑过时动态更新标题
                    // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                    chart.setTitle({
                      text: e.target.name + "\t" + e.target.y + " %",
                    });
                  },
                  //,
                  // click: function(e) { // 同样的可以在点击事件里处理
                  //     chart.setTitle({
                  //         text: e.point.name+ '\t'+ e.point.y + ' %'
                  //     });
                  // }
                },
              },
            },
          },
          series: [
            {
              type: "pie",
              innerSize: "80%",
              name: "市场份额",
              data: [
                { name: "Firefox", y: 45.0, url: "http://bbs.hcharts.cn" },
                ["IE", 26.8],
                {
                  name: "Chrome",
                  y: 12.8,
                  sliced: true,
                  selected: true,
                  url: "http://www.hcharts.cn",
                },
                ["Safari", 8.5],
                ["Opera", 6.2],
                ["其他", 0.7],
              ],
            },
          ],
        },
        function (c) {
          // 图表初始化完毕后的会掉函数
          // 环形图圆心
          var centerY = c.series[0].center[1],
            titleHeight = parseInt(c.title.styles.fontSize);
          // 动态设置标题位置
          c.setTitle({
            y: centerY + titleHeight / 2,
          });
        }
      );
    },
  },
  mounted() {
    this.getChart1();
    this.getChart2();
    this.getChart3();
  },
};
</script>

<style lang="scss" scoped>
.homepage1 {
  height: 340px;
  width: 100%;
  margin-bottom: 20px;
  .chart1 {
    width: 570px;
    height: 100%;
    background-color: #fff;
  }
  .chart2 {
    width: 343px;
    height: 100%;
    background-color: #fff;
    margin: 0 20px;
  }
  .chart3 {
    width: 343px;
    height: 100%;
    background-color: #fff;
  }
}
</style>